import React, { Component, Fragment } from 'react'
import backImg from '../../../../images/questionBack.jpg'
import QuestionContent from '../components/writeQuestion/QuestionContent'
import axios from "axios"

export default class questionnaire extends Component {
    constructor(props) {
        super(props);

        this.state = {
            questionContent: [],
            author: '',
            title: '',
        }
    }

    getQuetionsData = () => {
        axios.get('/static/questionContent.json').then(res => {
            this.setState({
                author: res.data.author,
                questionContent: res.data.content,
                title: res.data.title
            });
            console.log(res.data.content);
        })
    }

    componentWillMount() {
        this.getQuetionsData();
    }

    render() {
        return (
            <Fragment>
                <div style={{
                    position: 'relative',
                    zIndex: 99,
                    margin: '0 auto'
                }}>
                    <div style={{
                        textAlign: 'center',
                        fontSize: 40,
                        paddingTop: 30,
                        paddingBottom: 30,
                        color: '#fff'
                    }}>
                        {this.state.title}
                    </div>
                    <div style={{
                        textAlign: 'center',
                        fontSize: 20,
                        paddingBottom: 30
                    }}>
                        创作者：{this.state.author}
                    </div>
                    <QuestionContent questionContent={this.state.questionContent} />
                </div>
                <div style={{
                    backgroundImage: `url(${backImg})`,
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'cover',
                    position: 'fixed',
                    top: 0,
                    bottom: 0,
                    width: '100%',
                    height: '100%'
                }}>
                </div>
            </Fragment>
        )
    }
}
